<template>
	<view>
		<view class="page-body" :style="'min-height:'+windowHeight+'px'">
			<view class="container">
				<view class="t1">添加银行卡</view>
				<view class="t2">请绑定持卡人本人的银行卡</view>
				<view class="ipt-item clearfix" style="margin-top: 40rpx;border-bottom: 0">
					<view class="label fl">开户行</view>
					<view class="fl">
						<picker @change="bindPickerType" :value="typeIndex" :range="bankArray" style="width: 400rpx;height: 50rpx">
                <view class="uni-input" style="height: 50rpx" v-if="bankData.bank_name">{{bankData.bank_name}}</view>
                <view class="uni-input" style="height: 50rpx;color:#999" v-else>请选择开户行</view>
          	</picker>
					</view>
				</view>
				<view class="ipt-item clearfix">
					<view class="label fl">真实姓名</view>
					<view class="fl"><input class="search-input" v-model="bankData.real_name" placeholder="输入真实姓名" placeholder-style="font-size:24rpx;color:#999" /></view>
				</view>
				<view class="ipt-item clearfix">
					<view class="label fl">银行卡号</view>
					<view class="fl"><input class="search-input" v-model="bankData.bank_card" placeholder="输入银行卡号" placeholder-style="font-size:24rpx;color:#999" /></view>
				</view>
				<view class="ipt-item clearfix">
					<view class="label fl">手机号</view>
					<view class="fl"><input class="search-input" v-model="bankData.mobile" placeholder="输入手机号" placeholder-style="font-size:24rpx;color:#999" /></view>
				</view>
				<view class="ipt-item clearfix">
					<view class="label fl">身份证号</view>
					<view class="fl"><input class="search-input" v-model="bankData.identity_card" placeholder="输入身份证号" placeholder-style="font-size:24rpx;color:#999" /></view>
				</view>
				<view class="ipt-item clearfix">
					<view class="label fl">身份证正面</view>
					<view class="fl">
						<u-upload ref="uUpload" :show-progress="false" :header="{token: $store.getters.token}"
						:max-count="1" width="160" height="160" :action="action" upload-text="上传图片"
						@on-success="onSuccess" @on-remove="onRemove" :file-list="fileListUrl" />
					</view>
				</view>
				<view class="ipt-item clearfix">
					<view class="label fl">身份证反面</view>
					<view class="fl">
						<u-upload ref="uUpload" :show-progress="false" :header="{token: $store.getters.token}"
						:max-count="1" width="160" height="160" :action="action" upload-text="上传图片"
						@on-success="onSuccess2" @on-remove="onRemove2" :file-list="fileList2Url"/>
					</view>
				</view>
		    <button class="bg-primary br60 white lg" style="margin-top: 20rpx;" @click="submit">确认</button>
				
			</view>
		</view>
	</view>
</template>
 
<script>
import {
		withdrawAddcard,withdrawEditCard
} from "@/api/user";
import {
		baseURL
	} from '@/config/app';
export default {
		components: {},
		data() {
			return {

				action: baseURL + '/api/file/formimage',
				fileList: [],
				fileList2: [],

				fileListUrl: [],
				fileList2Url:[],
				windowHeight:0,
				userInfo:{},
				typeIndex:'',
				bankArray: [
		            '工商银行','农业银行','建设银行','中国银行','交通银行','招商银行','邮储银行','民生银行','平安银行','中信银行','浦发银行','兴业银行','光大银行','广发银行','华夏银行','宁波银行','北京银行','南京银行','上海银行','长子县融汇村镇银行','长沙银行','浙江泰隆商业银行','中原银行','企业银行（中国）','顺德农商银行','衡水银行','长治银行','大同银行','河南省农村信用社','宁夏黄河农村商业银行','山西省农村信用社','安徽省农村信用社','甘肃省农村信用社','天津农村商业银行','广西壮族自治区农村信用社','陕西省农村信用社','深圳农村商业银行','宁波鄞州农村商业银行','浙江省农村信用社联合社','江苏省农村信用社联合社','江苏紫金农村商业银行股份有限公司','北京中关村银行股份有限公司','星展银行（中国）有限公司','枣庄银行股份有限公司','海口联合农村商业银行股份有限公司','南洋商业银行（中国）有限公司'
		        ],
		        bankNo:[1002,1005,1003,1026,1020,1001,1066,1006,1010,1021,1004,1009,1022,1027,1025,1056,4836,1024,1054,4755,4216,4051,4753,4761,4036,4752,4756,4767,4115,4150,4156,4166,4157,4153,4113,4108,4076,4052,4764,4217,4072,4769,4778,4766,4758],
		        bankData:{
		        	bank_card:'',
		        	real_name:'',
		        	bank_name:'',
		        	mobile:'',
		        	identity_card:'',
		        	card_front:'',
		        	card_reverse:'',
		        }

			};
		},
		methods: {
			onSuccess(e) {
				this.fileList.push(e.data.base_uri)
			},
			onRemove(index) {
				this.fileList.splice(index, 1)
			},
			onSuccess2(e) {
				this.fileList2.push(e.data.base_uri)
			},
			onRemove2(index) {
				this.fileList2.splice(index, 1)
			},
			// getCodeValue(e){
			// 	this.bankData.code=e.detail.value
			// },
			bindPickerType(e){
				this.typeIndex=e.detail.value
				this.bankData.bank_name=this.bankArray[e.detail.value]
				//this.bankData.bankNumber=this.bankNo[e.detail.value]
			},
			submit(){
				console.log(138)
				this.bankData.card_front=this.fileList.length ? this.fileList[0] : ''
				this.bankData.card_reverse=this.fileList2.length ? this.fileList2[0] : ''
				// if(this.bankData.bank==''){
				// 	uni.showToast({title: '请选择开户行',icon: 'none'});
				// 	return
				// }else if(this.bankData.bankName==''){
				// 	uni.showToast({title: '请输入开户名',icon: 'none'});
				// 	return
				// }else if(this.bankData.bankCar==''){
				// 	uni.showToast({title: '请输入卡号',icon: 'none'});
				// 	return
				// }

				// uni.showLoading()
				if(this.bankData.card_id){
					 withdrawEditCard(this.bankData).then(({
						data,
						code
					}) => {
						if (code == 1) {
							uni.showToast({title: '提交成功',icon: 'success'});
								uni.navigateBack({
								    delta: 1
							});
						}
						// uni.hideLoading()
					})
				}else{
					 withdrawAddcard(this.bankData).then(({
							data,
							code
						}) => {
							if (code == 1) {
								uni.showToast({title: '提交成功',icon: 'success'});
									uni.navigateBack({
									    delta: 1
								});
							}
							// uni.hideLoading()
						})
				}
       
			},
		},
		onLoad(option){
			var that=this
			if(that.$Route.query.obj){
				that.bankData=JSON.parse(that.$Route.query.obj)
				that.bankData.card_id=that.bankData.id
				that.fileList.push(that.bankData.card_front)
				that.fileList2.push(that.bankData.card_reverse)

				that.fileListUrl.push({
					url:that.bankData.card_front
				})
				that.fileList2Url.push({
					url:that.bankData.card_reverse
				})
			}
			console.log()
			uni.getSystemInfo({
			    success: function (res) {
					that.windowHeight=res.windowHeight
				}
			});
		},
	}

</script>
<style>
	.page-body{
	background:#fff;
}
.container{
	width: 702rpx;
	margin:0rpx auto;
	padding-bottom: 120rpx;
	padding-top: 10rpx;
}
.t1{
	text-align: center;
	padding-top: 30rpx;
	font-size: 34rpx;
	color: #333
}
.t2{
	text-align: center;
	padding-top: 20rpx;
	font-size: 26rpx;
	color: #333
}
.label{
	width:200rpx;
	font-size: 30rpx;
	color: #333
}
.ipt-item{
	padding: 26rpx;
	border-top:solid 1rpx rgba(0,0,0,0.02);
	border-bottom:solid 1rpx rgba(0,0,0,0.02);
}
.search-input{
	width:400rpx
}
.sendBtn{
  width: 240rpx!important;
  height: 82rpx!important;
  padding: 0!important;
  border-radius: 10rpx;
  line-height: 82rpx!important;
  background:#FFC007!important;
  font-size: 30rpx!important;
  margin-top: -20rpx!important;
}
.sendNone{
  background: #f6f6f6!important;
}
.reply-input{
	font-size: 16rpx;
}
.btn{
	width:300rpx;
	height: 80rpx;
	text-align: center;
	line-height: 80rpx;
	font-size: 26rpx;
	background: #FFC007;
	font-size: 32rpx;
	color: #3A3A3A;
	border-radius: 10rpx;
	margin: 120rpx auto 0
}
</style>